//DOM树渲染向tbody中添加元素
function render(trackList){
    //1.找到要插入的容器元素（找到tbody元素，tbody下的所有元素应该由js动态添加进来）
    var tbody=document.querySelector('tbody')
    //2.遍历音频列表
    for(var i in trackList){
        var track=trackList[i];//格式：{tid:...,title:...}
        var html=`<tr><td>${track.tid}</td><td>${track.title}</td><td>${track.refCount}</td></tr>`;
        //3.添加每个音频的html到容器元素中
        tbody.innerHTML+=html
    }
}

function renderNoLogin(){
    document.querySelector('.who').textContent='必须登录后才能使用,请返回创作中心登录';
}
function renderWho(user){
    document.querySelector('.who').textContent=user.username;
}
function renderPagination(pagination){//分页信息
    var currentPage=parseInt(pagination.currentPage)
    if(currentPage===1){
        //说明此时没有上一页，让它上一页一直是在第一页
        document.querySelector('.prevPage').href+=currentPage
    }else{
         document.querySelector('.prevPage').href+=(currentPage-1)
    }

    document.querySelector('.countPerPage').textContent=pagination.countPerPage//每页多少个
    document.querySelector('.currentPage').textContent=pagination.currentPage//当前第多少页
    document.querySelector('.totalPage').textContent=pagination.totalPage//总共多少页
     if(currentPage===parseInt(pagination.totalPage)){
            //说明此时没有下一页
            document.querySelector('.nextPage').href+=currentPage
     }else{
              document.querySelector('.nextPage').href+=(currentPage+1)
     }
    document.querySelector('.lastPage').href+=pagination.totalPage
}


//1.为了让js代码可以在所有资源都加载完成后才去执行，就入口代码放在window的load事件中
window.onload=function(){
    //执行这个方法时，说明所有资源都被加载好了
    //1.发起ajax请求
    var xhr=new XMLHttpRequest();
    //访问html时的page要带到访问ajax JSON的page
    xhr.open('get','/studio/track/list.json'+location.search);//location.search表示?page=几，发送时带上才能使html页面随page不同变化
    xhr.onload=function(){
        if(xhr.status!==200){
            alert('检查一下后端响应是否正确,后端JSON出错了')
            return
        }

        //2.增加调试信息
        console.log(this.responseText);//打印内容
        //3.尝试使用JSON进行解析（如果后端出现了500错误，则响应不是JSON，这里就会错误）
        var data=JSON.parse(this.responseText);

        //4.判断是否正确——用户是否登陆了。根据currentUser的值判断是否登录
        if(!data.currentUser){
            //没有值,没有登陆
            renderNoLogin()
            alert('未登录，请返回创作中心登录')
            return
        }
        //走到这就是登录了
        renderWho(data.currentUser);//显示当前用户
        renderPagination(data.pagination);
        render(data.trackList);//{"currentUser":...,"trackList":[...]}//渲染列表
    }
    xhr.send(); //对JSON的请求是由这里发起的

}